<template>
  <div class="relative group inline-block">
    <!-- 触发元素 -->
    <slot />

    <!-- tooltip 内容 -->
    <div v-if="text" :class="[
      'absolute left-1/2 -translate-x-1/2 px-2 py-1 text-xs rounded shadow-lg transition-opacity duration-200 pointer-events-none whitespace-nowrap z-50',
      isDark ? 'bg-gray-700 text-white' : 'bg-white text-gray-900',
      position === 'top'
        ? 'bottom-full mb-2 opacity-0 group-hover:opacity-100'
        : 'top-full mt-2 opacity-0 group-hover:opacity-100'
    ]">
      {{ text }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue'

const props = defineProps<{
  text: string,
  position?: 'top' | 'bottom'
}>()

// const props = defineProps({ text: String, position: { type: String, default: 'top' } })

// 支持暗/亮模式
const isDark = inject('isDark', true)
</script>
